<template>
  <div class="todetail">
    <div class="wrap2">
      <div style="margin-left: -100px; margin-top: 20px" class="Breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">文章</el-breadcrumb-item>
          <el-breadcrumb-item>
            <a href="/">文章详情</a>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="todetailinfo">
        <h3 style="font-weight: bolder; font-size: 20px">{{essayList.title}}</h3>
        <div class="img" style="margin-top: 30px">
          <el-avatar shape="circle" :size="50" :src="essayList.avatar" />
          <div
            style="
              margin-left: 55px;
              margin-top: -50px;
              font-size: 13px;
              color: #b1b3b8;
            "
            class="info"
          >
            <h3>{{essayList.author}}</h3>
            <span>{{ essayList.createdTime }}</span>
            <div style="margin-left: 850px; margin-top: -22px" class="info2">
              {{essayList.browse}} 浏览
              <span>{{ essayList.thumbUp }} 点赞</span>
            </div>
            <div class="Category">
              <h3 style="margin-top: 10px; color: black">
                {{ essayList.content }}...
              </h3>
            </div>
            <div style="margin-top: 200px; margin-left: 850px" class="buttons">
              <el-button @click="addthumbUp(essayId)" round>点赞</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="comments-section">
        <h2>评论区</h2>
        <div v-for="comment in comments" :key="comment.id" class="comment">
          <img :src="comment.avatar || '../../assets/img/2.jpg'" alt="用户头像" class="avatar" />
          <div class="comment-content">
            <span class="nickname">{{ comment.nickname }}</span>
            <p>{{ comment.content }}</p>
            <p>{{ comment.gmtCreate }}</p>
          </div>
        </div>
        <el-input v-model="newComment" style="width: 100%" :rows="4" type="textarea" placeholder="发表评论..." />
        <div class="button-Comment">
          <el-button type="primary" @click="addComment">发布</el-button>
        </div>
      </div>
    </div>
   
  </div>
</template>

<script setup lang="ts">
import axios from "../../assets/js/axios";
import imgUrl from "../../assets/img/2.jpg";

import { ref } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { jwtDecode } from "jwt-decode";
const route = useRoute();
const newComment = ref("");
const comments = ref<any[]>([]);
const textarea2 = ref("");
const essayList = ref<any>([])
const essayId=route.query.id
//jwt
// 在这里定义 getUserIdFromToken 函数
const getUserIdFromToken = () => {
  const token = localStorage.getItem("userToken");
  if (token) {
    try {
      const decoded: any = jwtDecode(token);
      return {
        userId: decoded.id,
        nickname: decoded.nickname,
        avatar: decoded.avatar,
      };
    } catch (error) {
      console.error("Token解析失败", error);
      return null;
    }
  }
  return null;
};
const userData = getUserIdFromToken();
if (!userData) {
  ElMessage.error("用户信息获取失败");
}

//课程详情
  if(route.query.teacherId) {
  // 课程信息请求
  axios.get(`/serviceedu/edu-essay/getTeacherAvatar/${route.query.teacherId}`, {}).then((res:any) => {
    if(res.code === 200) {
      essayList.value = res.data.data
    }
  })
}
const addthumbUp=(essayId: unknown)=>{
  axios.post(`/serviceedu/edu-essay/updateThumbUp/${essayId}`,{})
    .then(() => {
      essayList.value.thumbUp += 1; 
      console.log("点赞数更新成功");
    })
    .catch(err => {
      console.error("更新点赞数失败", err);
    });
  
};
addthumbUp
//评论区
const getComment = () => {
  axios.get("/serviceedu/edu-comment/CommentList",{}).then((res: any) => {
    if (res.code === 200) {
      comments.value = res.data.list;
    }
  });
};
getComment();

const addComment = () => {
  if (!newComment.value.trim()) {
    ElMessage.error("评论内容不能为空");
    return;
  }

  if (userData) {
    axios
      .post("/serviceedu/edu-comment/addComment", {
        courseId: route.query.courseId,
        teacherId: route.query.teacherId,
        userId: userData.userId,
        nickname: userData.nickname,
        avatar: userData.avatar,
        content: newComment.value,
      })
      .then((res: any) => {
        if (res.code === 200) {
          ElMessage.success("评论发布成功");
          newComment.value = "";
          getComment();
        }
      });
  }
};
</script>

<style lang="less" scoped>
.todetail {
  height: 1200px;

  .wrap2 {
    width: 1000px;
    margin: 0 auto;
    .todetailinfo {
      margin-left: -70px;
      margin-top: 30px;
      height: auto;
      padding: 25px;
      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      background-color: #fff;
    }
    .comments-section {
  margin: 20px;
}
.comment {
  display: flex;
  margin-top: 10px;
  margin-bottom: 20px;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 10px;
}
.comment-content {
  p {
    margin-top: 10px;
  }
  .nickname {
    font-weight: bold;
  }
}
.button-Comment {
  display: flex;
  justify-content: flex-end; /* 右对齐 */
  margin-top: 10px;
}
    
  }
}
</style>
